/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-10-08 17:05:59
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-10-08 23:23:31
 * @FilePath: \react_staging\src\components\Search\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from 'react'
import axios from 'axios'
export default class index extends Component {
	//搜索事件回调
	search = () => {
		//获取用户输入连续解构赋值
		const {
			keyWordElement: { value: keyword }, 
		} = this
		//发送请求前通知App更新状态
		this.props.updataAppState({ isFirst: false, isLoading: true })
		axios.get(`/api1/search/users?q=${keyword}`).then(
			(response) => {
				// console.log('返回接口', response.data.items)
				//发送请求成功时通知App更新状态
				this.props.updataAppState({
					isLoading: false,
					userList: response.data.items,
				})
			},
			(error) => {
				//发送请求出错时通知App更新状态
				this.props.updataAppState({ isLoading: false, err: error.message })
			}
		)
	}
	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">Search Github Users</h3>
				<div>
					<input
						type="text"
						ref={(c) => (this.keyWordElement = c)}
						placeholder="enter the name you search"
					/>
					&nbsp;<button onClick={this.search}>Search</button>
				</div>
			</section>
		)
	}
}
